<template>
	<view class="indexBig">
		<!-- <view class="top">
			<image src="https://www.yongshantuan.cn/images/yongshan/arrowWhite.png" mode="" @click="goToBack"></image>
			<text>确认订单</text>
		</view> -->
		<view class="checkAddress" @click="goToPage()" v-if="!address.userName">
			<view class="">
				<view class="">请选择地址</view>
				<view class="">填写正确的地址</view>
			</view>
			<uni-icons type="right" size="22" color="#666"></uni-icons>
		</view>
		<!-- @click="showAddressList" -->
		<view class="checkAddress" v-if="address" @click="goToPage()">
			<view class="">
				<view class="">{{ address.depart || '请选择取餐地址' }} {{address.pickUpAddress || ''}}</view>
				<view class="">{{ address.userName }} {{ address.phone }} </view>
			</view>
			<uni-icons type="right" size="22" color="#666"></uni-icons>
		</view>
		<!-- <view class="addressBox">
			<view class="">
				<view class="">姓名：</view>
				<view class=""><input type="text" v-model="address.nameTakingMeal" placeholder="请填写收货人姓名"></input>
				</view>
			</view>
			<view class="">
				<view class="">手机号：</view>
				<view class=""><input type="text" v-model="address.phoneTakingMeal" placeholder="请填写正确的手机号"></input>
				</view>
			</view>
			<view class="address">
				<view class="">选择大厦：</view>
				<view>
					<picker @change="bindSupplyBuildings" :value="supplyBuildingsIndex"
						:range="addressList.supplyBuildings">
						<view class="picker">
							{{supplyBuildings}}
						</view>
					</picker>
				</view>
			</view>
			<view class="address">
				<view class="">选择楼层：</view>
				<view>
					<picker @change="bindSupplyBuildings" :value="supplyFloorsIndex" :range="supplyFloorsList">
						<view class="picker">
							{{supplyFloors}}
						</view>
					</picker>
				</view>
			</view>
		</view> -->
		<view class="shopCarContent">
			<!-- <view class="warn">温馨提示：不同店铺会分开包装，但是会一起送到</view> -->
			<view class="listContent">
				<view class="shopList">
					<!-- <view class=""> v-for="(item, index) in shopCarInfo.shopCarList" :key="index"
						<image :src="item.logo | getImg" mode=""></image>
						<view class="">
							<view class="">{{ item.storeName }}</view>
							<view class="">{{ item.storeDescription }}</view>
						</view>
					</view> -->
					<view class="foodList" v-for="(foodItem, foodIndex) in shopCarInfo.shopCarList" :key="foodIndex">
						<!-- <checkbox value="index" :checked="foodItem.checked" ref="childCheckBox"
							@click="shopCarChangeRadio(index, foodIndex)" /> -->
						<view class="">
							<image class="foodImage" :src="foodItem.foodImage" mode=""></image>
							<view class="">
								<view class="">{{ foodItem.foodName }}</view>
								<view class="specifications" v-if="foodItem.specifications.length">
									规格：<template v-for="(item,index) in foodItem.specifications">{{item.name}} <template
											v-if="index != foodItem.specifications.length-1">-</template> </template>
								</view>
								<view class="">
									<view class="">￥{{accMul(foodItem.showPrice, foodItem.count)}}</view>
									<view class="showInput">
										<!-- 	<button class="down"
											@click="changeShopNum('down',  foodItem, foodItem,addressId,'createOrder')">
										</button> -->
										<view class="operation" v-if="foodItem.count"
											@click="changeShopNum('down',  foodItem, foodItem,addressId,'createOrder')">
											<image src="/static/minus.jpg"></image>
										</view>
										<text class="count" v-if="foodItem.count">{{foodItem.count}}</text>
										<view class="operation"
											@click="changeShopNum('add', foodItem, foodItem,addressId,'createOrder')">
											<image src="/static/add.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 	<view class="coupon" @click="setPayType('pointsPay',walletBalanceAndPoints)">
						<view>积分抵扣</view>
						<view class="flex1">
							<view class="flex2">
								可用积分 {{walletBalanceAndPoints.points}}
								<view class="points2Money">
									可抵扣￥{{walletBalanceAndPoints.points2Money}}元
								</view>
							</view>
							<view>
								<uni-icons size="25" type="checkbox-filled"
									:color="payType == 'pointsPay' ? '#eb5b1e' : '#cccccc'"></uni-icons>
							</view>
						</view>
					</view> -->

					<view class="coupon" @click="setPayType('walletPay',userObj)">
						<view>余额支付</view>
						<view class="flex1">
							<view class="flex2">可用余额{{userObj.balance}}元</view>
							<uni-icons size="25" type="checkbox-filled"
								:color="payType == 'walletPay' ? '#eb5b1e' : '#cccccc'"></uni-icons>

							<!-- <view :class="{checkout:true,checked:payType == 'walletPay',disable:walletBalanceAndPoints.walletBalance <= 0 }"></view> -->
							<!-- <block v-if="walletBalanceAndPoints.walletBalance > 0">
								<uni-icons v-if="payType == 'walletPay'" type="checkbox-filled" size="25"
									color="#35AA4C"></uni-icons>
								<uni-icons v-else type="circle" size="25" color="#333"></uni-icons>
							</block>  v-else  -->
							<!-- <view class="disable">

							</view> -->
						</view>
					</view>
					<!-- 	<view class="coupon" @click="showCouponList">
						<view>优惠券</view>
						<view>
							<view class="couponName">{{coupon.couponName || '不使用优惠券'}}</view>
							<uni-icons type="right" size="20" color="#666666"></uni-icons>
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<view class="shopCarContent ">
			<view class="listContent">
				<view class="shopList">
					<view class="note">
						<view class="">备注</view>
					</view>
					<view class="noteInput" :class="{ show:true}">
						<textarea maxlength="120" v-model="note" placeholder="请输入不超过120字的备注"></textarea>
						<div class="note_len"><text>{{note.length}}</text>/120</div>
					</view>
				</view>
			</view>

			<view class="total">
				<view class="">共计</view>
				<!-- 原价 -->
				<view class="">￥{{ shopCarInfo.totalShowPrice }}</view>
			</view>
		</view>

		<view class="shopCarBottom">
			<view class="">
				<!-- <view class="">
					<image src="https://www.yongshantuan.cn/images/yongshan/shopCar2.png"></image>
					<div class="num">{{ shopCarInfo.total }}</div>
				</view> -->
				<view class="realPayPrice">
					合计:<span>￥{{shopCarInfo.realPayPrice }}</span>
				</view>
				<view class="deduction">
					<text v-if="coupon.couponValue">优惠券抵扣{{coupon.couponValue}}元</text>
					<text
						v-if="payType != ''">{{payType == 'pointsPay' ? `积分抵扣${pointsPay}`  : `余额抵扣${walletPay}`}}元</text>
				</view>
			</view>
			<view class="" @click="submitOrder">提交订单</view>
		</view>


		<view id="content"></view>
		<uni-popup ref="couponPopup" type="center" background-color="#f5f5f5">
			<scroll-view scroll-y class="couponList">
				<view class="coupon_item" @click="setCoupon({receiveCouponId: '',couponValue:0,couponName: ''})">
					<view class="coupon_item_left">
						<view class="couponValue">
							<text>￥</text>
							0
						</view>
						<view class="couponName">
							不使用优惠券
							<!-- <text>满{{item.couponValue}}可用</text> -->
						</view>
					</view>
					<!-- <view :class="['check',coupon.receiveCouponId  == '' ? 'active' : '']"></view> -->
					<uni-icons size="30" type="checkbox-filled"
						:color="coupon.receiveCouponId  == '' ? '#eb5b1e' : '#cccccc'"></uni-icons>
				</view>
				<view v-for="item in couponList" class="coupon_item" @click="setCoupon(item)">
					<view class="coupon_item_left">
						<view class="couponValue">
							<text>￥</text>
							{{item.couponValue}}
						</view>
						<view class="couponName">
							<view>{{item.couponName}}</view>
							<text>{{item.expiredAt}}</text>
						</view>
					</view>
					<!-- 	<view :class="['check',item.receiveCouponId == coupon.receiveCouponId ? 'active' : '']">

					</view> -->
					<uni-icons size="30" type="checkbox-filled"
						:color="item.receiveCouponId == coupon.receiveCouponId ? '#eb5b1e' : '#cccccc'"></uni-icons>
				</view>
			</scroll-view>
		</uni-popup>

	</view>
</template>

<script>
	import util from "@/utils/util.js";
	import {
		queryShoppingCart,
		createOrder,
		addShoppingCart,
		removeShoppingCart,
		chooseBestCoupon,
		querySupplyAddress,
		toPay,
		queryOrderDetailWhenTryAgain,
		queryUserPickUpAddress,
		queryWalletBalanceAndPoints,
		queryWelcomePageData
	} from "@/request/api.js";
	import MyMinix from '@/utils/minix/minix.js';

	export default {
		mixins: [MyMinix],
		components: {},
		data() {
			return {

				addressId: '', //地址id
				shopCarInfo: {
					totalPrice: 0,
					realPayPrice: 0
				}, //购物车信息
				address: '',
				addressList: {},
				supplyFloorsList: [],
				supplyBuildingsIndex: 0,
				supplyBuildings: '', //地址大楼
				supplyFloors: '', //地址楼层
				supplyFloorsIndex: 0,
				// 优惠券列表
				couponList: [],
				// 优惠券
				coupon: {
					receiveCouponId: '',
					value: 0,
					couponName: ''
				},
				note: '', //备注
				show: false,
				visible: true, //显示地址
				orderId: '', //订单id
				orderType: '', //订单类型 
				walletBalanceAndPoints: {
					walletBalance: 0,
					points: 0,
					points2Money: 0
				}, // 金额 、积分信息
				payType: 'walletPay',
				walletPay: 0, //金额 提交订单接口使用
				pointsPay: 0, //积分 提交订单接口使用
				userObj: {}

			};
		},
		// // 获取 vuex里的购物车信息
		// computed: {
		// 	shopCarInfos() {
		// 		return this.$store.getters.getShopCarInfo
		// 	}
		// },
		// // 数据监听
		// watch: {
		// 	// 购物车数据改变了
		// 	shopCarInfos: {
		// 		handler(val) {
		// 			console.log(66666);
		// 			this.setTotalPrice();
		// 		},
		// 		deep: true, //深度监听
		// 		immediate: true //第一次设置数据触发
		// 	},
		// },
		onShow() {
			// 查询用户地址
			this.queryUserPickUpAddressFn();
		},
		//
		async onLoad(options) {
			this.orderType = options.type;
			// 获取选中的大厦信息
			let datas = util.getStorePage();
			let currAddress = datas['currAddress'];
			if (currAddress) {
				this.addressId = currAddress.addressId
			}
			if (options.type == "createOrder") {
				// this.addressId = options.addressId
			} else {
				// 获取订单id 再来一单
				this.orderId = options.id;
			}

			// 优惠券
			// await this.chooseBestCouponFn();
			//  查询可用余额和积分及积分可抵扣金额
			// await this.queryWalletBalanceAndPointsFn();
			await this.queryWelcomePageDataFn();
			// 查看购物车列表
			this.getShopCar('init');

		},
		methods: {
			// 跳转到选择地址
			goToPage() {
				util.goToUrl("/pages/order/addAddress?addressId=" + this.addressId)
			},

			// 选择余额或者积分抵扣
			setPayType(type, data) {
				let value = 0;
				if (type == 'pointsPay') {
					value = data['points'];
					// 如果积分小于等于0，积分不可用 
					if (value <= 0) {
						// 如果积分小于等于0，积分不可用 
						uni.showToast({
							title: '可用积分为0!',
							icon: 'none'
						})
						return
					}
				} else if (type == 'walletPay') {
					value = data['balance'];
					// 如果积分小于等于0，余额不可用 
					if (value <= 0) {
						uni.showToast({
							title: '可用余额为0!',
							icon: 'none'
						})
						return
					}
				}
				this.payType = this.payType == type ? '' : type;
				// 进行优惠券、余额、积分
				this.setTotalPrice();

			},

			// 获取首页背景图，轮播图，用户昵称，余额，优惠券，积分等信息
			async queryWelcomePageDataFn() {
				let userInfo = uni.getStorageSync('userInfo')
				let res = await queryWelcomePageData({
					method: "get",
					data: userInfo.phoneNumber ? {
						phoneNumber: userInfo.phoneNumber
					} : {}
				});
				if (res.code == 200) {
					this.userObj = res.data;
				}
			},

			// 查询可用积分 、余额

			async queryWalletBalanceAndPointsFn() {
				let res = await queryWalletBalanceAndPoints({
					method: "GET",
				});
				if (res.code == 200) {
					let result = res.result;
					// 测试数据
					// result.walletBalance = 0
					// result.points = 0
					// if (!this.payType) {
					// 	// 如果可用余额大于0 
					// 	if (result.walletBalance > 0) {
					// 		this.payType = 'walletPay';
					// 	} else if (result.points > 0) { // 如果可用积分 大于0 
					// 		this.payType = 'pointsPay'
					// 	}
					// }
					this.walletBalanceAndPoints = result;

				}
			},

			// 设置积分、余额抵扣金额
			setTotalPrice() {
				// 如果有优惠券
				if (this.coupon.couponValue) {
					this.setCouponPrice();
				} else {
					this.shopCarInfo.realPayPrice = this.shopCarInfo.totalShowPrice;
				}
				let {
					balance,
					points
				} = this.userObj;
				let {
					realPayPrice
				} = this.shopCarInfo;
				let deduction = 0;
				let payType = this.payType;
				if (payType == 'walletPay') {
					// 如果可用金额大于商品 金额， 
					if (balance >= realPayPrice) {
						this.walletPay = realPayPrice;
					} else {
						this.walletPay = balance;
					}
					this.pointsPay = 0;
					deduction = this.walletPay;
				} else if (payType == 'pointsPay') {
					// 如果可用积分大于商品 金额， 
					if (points >= realPayPrice) {
						this.pointsPay = realPayPrice;
					} else {
						this.pointsPay = points;
					}
					this.walletPay = 0;
					deduction = this.pointsPay;
				}
				this.shopCarInfo.realPayPrice = this.accSub(realPayPrice, deduction)
			},

			// 设置优惠券抵扣金额 
			setCouponPrice() {
				this.shopCarInfo.realPayPrice = this.accSub(this.shopCarInfo.totalPrice, this.coupon.couponValue);
			},

			// 查询用户地址
			async queryUserPickUpAddressFn() {
				let userInfo = uni.getStorageSync("userInfo")
				let res = await queryUserPickUpAddress({
					method: "GET",
					data: {
						companyId: userInfo.companyId,
						phone: userInfo.phoneNumber,
					}
				});
				if (res.code == 200) {
					this.address = res.data;
				}
			},

			// 获取已领取优惠券
			async chooseBestCouponFn() {
				let res = await chooseBestCoupon({
					method: "GET",
					data: {
						siteId: this.addressId,
					}
				})
				let {
					allCoupons,
					bestCoupon
				} = res.result;
				this.couponList = allCoupons;
				this.coupon = bestCoupon;
			},
			// 显示优惠券列表
			showCouponList() {
				if (this.couponList.length == 0) {
					uni.showToast({
						title: '暂无优惠券!',
						icon: 'none'
					})
					return;
				}
				this.$refs.couponPopup.open('bottom')
			},
			// 设置优惠券
			setCoupon(item) {
				this.coupon = item;
				this.setTotalPrice();
				this.$refs.couponPopup.close()
			},

			//展示列表的购物车加减以及规格弹窗的添加至购物车
			// async changeShopNum(type, foodItem, item) {
			// 	let token = uni.getStorageSync('token');
			// 	if (!token) {
			// 		this.auth = true;
			// 		return;
			// 	}
			// 	if (type == 'add') {
			// 		if (foodItem.limitCount < 1) {
			// 			this.$showToast(this, '库存不足，无法继续添加', 'fail');
			// 			return;
			// 		}
			// 		let params = {
			// 			"siteAddressId": this.addressId,
			// 			"storeId": item.storeId,
			// 			"storeName": item.storeName,
			// 			"foodId": foodItem.foodId,
			// 			"foodName": foodItem.foodName,
			// 			"count": 1,
			// 			"salePrice": foodItem.salePrice,
			// 			"specification": []
			// 		}
			// 		let res = await addShoppingCart({
			// 			method: "POST",
			// 			data: params,
			// 		})
			// 		if (res.code == 200) {
			// 			foodItem.count += 1
			// 		} else {
			// 			uni.showToast({
			// 				title: res.message,
			// 				type: 'none',
			// 			})
			// 		}
			// 	} else if (type == 'down' && foodItem.count >= 1) {
			// 		let res = await removeShoppingCart({
			// 			method: "post",
			// 			data: {
			// 				"siteId": this.addressId,
			// 				"foodId": foodItem.foodId,
			// 				"count": 1,
			// 			},
			// 		})
			// 		res.code == 200 && (foodItem.count -= 1);

			// 	}
			// 	this.getShopCar();
			// },
			//获取购物车列表
			async getShopCar(type) {
				console.log(type,this.orderType,'orderType');
				if (this.orderType == "createOrder") {
					// 购物车
					await this.queryShoppingCartFn();
				} else {
					// 获取再来一单  订单信息
					if (type == 'init') {
						await this.queryOrderDetailWhenTryAgainFn()
					} else {
						await this.setShopCarInfo(this.shopCarInfo.shopCarList);
					};
				}
				this.$nextTick(() => {
					this.setTotalPrice();
				})
			},
			// 查询购物车信息
			async queryShoppingCartFn() {
				let that = this;
				let userInfo = uni.getStorageSync('userInfo');
				let res = await queryShoppingCart({
					method: "GET",
					data: {
						menuId: userInfo.menuId,
						phone: userInfo.phoneNumber,
						pageNo: 1,
						pageSize: 50
					}
				});
				if (res.code == 200) {
					this.setShopCarInfo(res.data);
				}
			},
			// 设置商品信息
			setShopCarInfo(shoppingCart) {
				let total = 0,
					totalPrice = 0,
					totalShowPrice = 0;
				shoppingCart.forEach((item, index) => {
					if (item.count == 0) {
						shoppingCart.splice(index, 1);
					}
					total = total + item.count;
					totalPrice = this.accAdd(totalPrice, this.accMul(item.foodPrice, item.count));
					totalShowPrice = this.accAdd(totalShowPrice, this.accMul(item.showPrice, item.count));
				});

				this.shopCarInfo = {
					total,
					shopCarList: shoppingCart,
					totalPrice,
					realPayPrice: totalPrice,
					totalShowPrice:totalShowPrice

				};
				this.$store.commit("setShopCarInfo", {
					total,
					shopCarList: shoppingCart,
					totalPrice
				});
			},
			// 提交订单
			async submitOrder() {
				if (!this.address?.userName || !this.address?.phone || !this.address?.depart || !this.address
					?.pickUpAddress) {
					uni.showToast({
						title: "请选择收货地址!",
						icon: 'none'
					})
					return;
				}
				let userInfo = uni.getStorageSync('userInfo');
				let res = await createOrder({
					method: "POST",
					data: {
						// "siteId": this.addressId,
						// "userId": util.getUserId(),
						"menuId": userInfo.menuId,
						"companyId": userInfo.companyId,
						"phone": this.address.phone,
						"nameTakingMeal": this.address.userName,
						"address": this.address.depart + '-' + this.address.pickUpAddress,
						"shoppingCartIds": this.shopCarInfo.shopCarList.map(item => item.shoppingCartId),
						"totalPrice": this.shopCarInfo.totalPrice,
						totalShowPrice:this.shopCarInfo.totalShowPrice,
						"realPayPrice": Number(this.shopCarInfo.realPayPrice),
						"note": this.note,
						"walletPay": this.payType == 'walletPay' ? Number(this.walletPay) : 0,
						// "couponValue": this.coupon.couponValue,
						// "receiveCouponIds": this.coupon.receiveCouponId,
						// "pointsPay": this.payType == 'pointsPay' ? this.pointsPay : 0,

					}
				})
				if (res.code == 200) {
					if (res.data.amountTotal == 0) {
						this.paySuccess();
						return;
					}
					uni.showToast({
						title: "下单成功!",
						icon: 'success'
					})
					// 下单成功 清空购物车
					this.$store.commit("setShopCarInfo", '');
					let pay = await util.payMent(res.data)
					if (pay.errMsg == 'requestPayment:ok') {
						this.paySuccess();
					} else if (pay.errMsg == 'requestPayment:fail cancel') {
						uni.showToast({
							title: "取消支付!",
							icon: 'none',
							success() {
								// 关闭当前页面 跳转到待支付
								setTimeout(() => {
									util.goToUrl('/pages/myPage/delCenter/delCenter?status=1',
										'redirectTo')
								}, 1000)
							}
						})

					}
					//  查询可用余额和积分及积分可抵扣金额
					this.queryWalletBalanceAndPointsFn();
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}

			},
			paySuccess() {
				uni.showToast({
					title: "支付成功!",
					icon: 'success',
					success() {
						// 关闭当前页面 跳转到待收货
						setTimeout(() => {
							util.goToUrl('/pages/myPage/delCenter/delCenter?status=2',
								'redirectTo')
						}, 1000)
					}
				})
			},

			// 获取订单信息 
			async queryOrderDetailWhenTryAgainFn() {
				let userInfo = uni.getStorageSync('userInfo');
				let res = await queryOrderDetailWhenTryAgain({
					method: "post",
					data: {
						orderId: this.orderId,
						phone: userInfo.phoneNumber,
						
					}
				})
				if (res.code == 200) {
					this.setShopCarInfo(res.data);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.indexBig {
		min-height: calc(100vh - 150rpx);
		background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ec6025 58.65%, #ec6025 98.93%);
		background-size: 100vw 466rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
		padding: 40rpx 20rpx;
		padding-bottom: 150rpx;

		.addressBox {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			padding: 20rpx 40rpx;
			margin-bottom: 20rpx;

			// .address {
			// 	/deep/.u-input {}

			// 	>view {
			// 		>view:nth-child(1) {
			// 			width: calc(100% - 35rpx);
			// 			line-height: 1.5;
			// 		}
			// 	}
			// }

			>view {
				@include flexs(space-between, flex-start);
				padding: 20rpx 0;
				position: relative;
				font-size: 30rpx;
				line-height: 60rpx;
				border-bottom: 1rpx solid #eaeaea;

				&:last-child {
					border: 0;
				}

				>view:nth-child(1) {
					width: 150rpx;
				}

				>view:nth-child(2) {
					width: calc(100% - 150rpx);
				}

				/deep/.u-input {
					width: 100%;
					border-bottom: 1px solid rgba(0, 0, 0, 0.05);
					border-color: rgba(0, 0, 0, 0.05) !important;
				}

				input {
					width: calc(100% - 20rpx);
					height: 65rpx;
					line-height: 65rpx;
					min-height: auto !important;
					padding: 0 10rpx;
					// border: 1rpx solid #ccc;
					border-radius: 10rpx;
				}

				textarea {
					width: calc(100% - 20rpx);
					height: 120rpx;
					border: 1rpx solid #ccc;
					border-radius: 10rpx;
					padding: 10rpx;
				}

				>view {
					>.arrow {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: 0;
						top: calc((100% - 30rpx) / 2);
					}
				}
			}

			>.posiImg {
				display: block;

				>view {
					width: 100%;

					&:nth-child(2) {
						width: 100%;
					}
				}

				>.imgContent {
					// padding-bottom: 100%;
					// position: relative;
					// image {
					// 	position: absolute;
					// 	left: 0;
					// 	top: 0;
					// 	bottom: 0;
					// 	right: 0;
					// 	// max-width: 100%;
					// 	// max-height: 100%;
					// 	width: 100%;
					// 	height: 100%;

					// 	margin: 0 auto;
					// }
				}
			}
		}


		.top {
			position: relative;
			height: 40rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				transform: rotate(90deg);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}

			text {
				color: #fff;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.checkAddress {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 24rpx 20rpx;
			@include flexs(space-between, center);
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

			image {
				width: 30rpx;
				height: 30rpx;
			}

			>view {
				>view {
					&:nth-child(1) {
						font-size: 38rpx;
						margin-bottom: 35rpx;
					}

					&:nth-child(2) {
						font-size: 24rpx;
						// color: rgba(0, 0, 0, 0.35);
					}
				}
			}
		}

		.payWay {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 40rpx 40rpx;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			@include flexs(space-between, center);

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}

			>view {
				font-size: 32rpx;
				line-height: 2;
				@include flexs();

				&:nth-child(2) {
					color: #fa690a;
				}
			}
		}

		.shopCarContent {
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.warn {
				font-size: 28rpx;
				line-height: 2;
				border-radius: 50rpx;
				background-color: #ffedd7;
				color: #ec2f2f;
				text-align: center;
				margin: 20rpx 0;
			}

			>.shopTop {
				@include flexs(space-between, center);
				font-size: 28rpx;
				line-height: 2;

				label,
				view {
					@include flexs(flex-end, center);
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.shopList {
				// >view:nth-child(1) {
				// 	margin: 20rpx 0;
				// 	@include flexs();
				// 	border-bottom: 1px solid #eee;
				// 	padding: 32rpx 0;

				// 	image {
				// 		width: 100rpx;
				// 		height: 100rpx;
				// 		margin-right: 24rpx;
				// 		border-radius: 16rpx;
				// 	}

				// 	>view {
				// 		height: 100rpx;
				// 		@include flexs(space-between, flex-start);
				// 		flex-direction: column;
				// 		padding: 10rpx 0;

				// 		>view {
				// 			&:nth-child(1) {
				// 				font-size: 28rpx;
				// 				font-weight: bold;
				// 			}

				// 			&:nth-child(2) {
				// 				font-size: 24rpx;
				// 				color: rgba(0, 0, 0, 0.55);
				// 			}
				// 		}
				// 	}
				// }

				.foodList {
					@include flexs();
					margin: 40rpx 0;

					>view {
						width: 100%;
						@include flexs();

						.foodImage {
							width: 160rpx;
							height: 160rpx;
							margin-right: 24rpx;
							margin-left: 24rpx;
							flex-shrink: 0;
							border-radius: 5rpx;
							border-radius: 16rpx;
						}

						>view {
							width: calc(100% - 140rpx);
							min-height: 120rpx;
							@include flexs(space-between, flex-start);
							flex-direction: column;

							>view {
								@include flexs(space-between, center);
								width: 100%;

								&:nth-child(1) {
									font-size: 28rpx;
									font-weight: bold;
									display: block;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								&:nth-child(2) {
									font-size: 24rpx;
									margin: 12rpx 0;
									color: #aaa;
								}

								// .showInput {
								// 	width: 150rpx;
								// 	// justify-content: 
								// 	@include flexs(space-around, center);
								// 	color: #000000;
								// 	border-radius: 50rpx;
								// 	border: 1px solid #eee;
								// 	padding: 0 8rpx;
								// 	overflow: hidden;
								// 	button {
								// 		width: 50rpx;
								// 		height: 50rpx;
								// 		line-height: 50rpx;
								// 		text-align: center;
								// 		font-size: 50rpx;
								// 		position: relative;
								// 		background: #fff;
								// 		&.down,
								// 		&.add {

								// 			&::before {
								// 				content: '';
								// 				position: absolute;
								// 				top: 50%;
								// 				left: 50%;
								// 				transform: translate(-50%, -50%);
								// 				width: 25rpx;
								// 				height: 5rpx;
								// 				border-radius: 10rpx;
								// 				background: #666;
								// 			}
								// 		}
								// 		&.down {
								// 			&::after {
								// 				content: '';
								// 				border: none;
								// 			}
								// 		}
								// 		&.add {
								// 			&::after {
								// 				content: '';
								// 				position: absolute;
								// 				top: 50%;
								// 				left: 50%;
								// 				transform: translate(-50%, -50%);
								// 				width: 5rpx;
								// 				height: 25rpx;
								// 				border-radius: 5rpx;
								// 				background: #666;
								// 			}
								// 		}
								// 	}

								// 	input {
								// 		width: calc(100% - 70rpx);
								// 		text-align: center;
								// 		height: 50rpx;
								// 		min-height: 50rpx;
								// 		line-height: 50rpx;
								// 	}
								// }


								>view {
									// @include flexs();

									&:nth-child(2) {
										border-radius: 50rpx;
										// border: 1px solid #eee;
									}

									&:nth-child(1) {
										font-size: 28rpx;
										font-weight: bold;
										color: #ff0305;
									}

									// >view {
									// 	width: 50rpx;
									// 	height: 50rpx;
									// 	font-size: 36rpx;
									// 	text-align: center;
									// 	line-height: 50rpx;
									// }

									// svg {
									// 	margin: 0 10rpx;
									// }

									// /deep/.u-input__input {
									// 	flex: 1;
									// 	line-height: 50rpx;
									// 	height: 50rpx;
									// 	font-size: 28rpx;
									// 	min-height: 50rpx !important;
									// 	text-align: center;
									// }
								}
							}
						}
					}
				}

				.coupon {
					@include flexs(space-between, center);
					padding: 10rpx 0;

					.flex1 {
						@include flexs(space-between, center);

						.points2Money {
							color: #ea5c1e;
							// padding-right: 12rpx;
						}
					}

					.flex2 {
						@include flexs(space-between, center);
						flex-direction: column;
						padding-right: 15rpx;

						&>view {
							margin-top: 10rpx;
						}
					}

					.flex3 {
						@include flexs(space-between, center);
					}

					.checkout {
						width: 35rpx;
						height: 35rpx;
						border-radius: 35rpx;
						margin-left: 10rpx;
						border: 1rpx solid #666;
					}

					.checked {
						background: #35AA4C;
						position: relative;

						// @include flexs(center, center);
						&:after {
							content: '';
							width: 8rpx;
							height: 16rpx;
							border-right: 4rpx solid #fff;
							border-bottom: 4rpx solid #fff;
							position: absolute;
							top: 45%;
							left: 25%;
							transform: rotate(45deg) translate(-50%, -50%);

						}
					}

					.disable {
						background: #ccc;
					}

					&>view {
						@include flexs(center, center);
					}

					.couponName {
						padding-right: 15rpx;
					}
				}

				.note {
					// font-size: 24rpx;
					@include flexs(center, flex-start);
					flex-direction: column;
					line-height: 2;
					// color: rgba(0, 0, 0, 0.55);
				}

				.noteInput {
					// display: none;
					margin-bottom: 20rpx;

					textarea {
						width: calc(100% - 20rpx);
						margin-top: 20rpx;
						flex: 1;
						padding: 20rpx;
						height: 200rpx;
						font-size: 28rpx;
						// min-height: 70rpx !important;
						text-align: left;
						background-color: #f5f5f5;
						border-radius: 10rpx;
						margin-bottom: 10rpx;
					}

					.note_len {
						font-size: 26rpx;
						text-align: right;

						text {
							color: #35AA4C;
						}
					}
				}

				.show {
					display: block;
				}
			}

			.total {
				padding: 40rpx 0;
				@include flexs(space-between, center);
				border-top: 1px solid #eee;

				>view {
					&:nth-child(2) {
						color: #fa690a;
						font-weight: bold;
					}
				}
			}
		}

		/deep/.uni-checkbox-input {
			border-radius: 50%;
			width: 36rpx;
			height: 36rpx;
			border-color: #fa690a !important;
		}

		/deep/.uni-checkbox-input-checked {
			border-color: #fa690a !important;

			&:before {
				content: '';
				width: 30rpx;
				height: 30rpx;
				background-color: #fa690a;
				border-radius: 50%;
				display: block;
			}
		}

		.posiBottom {
			/deep/.u-drawer-bottom {
				width: 100% !important;
				padding: 30rpx 20rpx 40rpx 20rpx;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
			}

			.posiContent {
				>view {
					&:nth-child(1) {
						font-size: 30rpx;
						text-align: center;
						font-weight: bold;
					}
				}

				>.listContent {
					margin-top: 10rpx;

					.list {
						border-bottom: 1px solid #eee;
						font-size: 30rpx;
						line-height: 2;
						padding: 10rpx 0;
						@include flexs();

						&:last-child {
							border-bottom: 0;
						}

						>view {
							margin-left: 10rpx;
							@include flexs(flex-start, flex-start);
							flex-direction: column;

							>view {
								&:nth-child(1) {
									font-size: 28rpx;
									line-height: 1.5;
								}

								@include flexs();

								>view {
									font-size: 24rpx;
									color: #666;
								}

								>view:nth-child(1) {
									margin-right: 20rpx;
								}
							}
						}

						/deep/.uni-radio-input {
							border-color: #f1b825;
							width: 40rpx;
							height: 40rpx;
						}

						/deep/.uni-radio-input-checked {
							background-color: #fff !important;
							border-color: #f1b825 !important;

							&:before {
								content: '';
								width: 35rpx;
								height: 35rpx;
								background-color: #f1b825;
								border-radius: 50%;
								display: block;
							}
						}
					}
				}

				.button {
					background-color: #f1b825;
					color: #fff;
					font-size: 32rpx;
					line-height: 2;
					border-radius: 50rpx;
					text-align: center;
					width: 100%;
					margin: 20rpx auto;
					padding: 5rpx 0;
				}
			}
		}
	}

	.shopCarBottom {
		z-index: 2;
		position: fixed;
		left: 50%;
		bottom: 30rpx;
		transform: translateX(-50%);
		width: calc(100% - 100rpx);
		// margin:0 auto 30rpx;
		background-color: #fff;
		box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.05);
		@include flexs(space-between, center);
		padding: 15rpx 30rpx;
		border-radius: 60rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}

		>view {
			&:nth-child(1) {
				>view {
					position: relative;

					span {
						color: #FF0404;
					}

					// >.num {
					// 	position: absolute;
					// 	right: -5px;
					// 	top: -5px;
					// 	font-size: 20rpx;
					// 	width: 30rpx;
					// 	height: 30rpx;
					// 	border-radius: 50%;
					// 	text-align: center;
					// 	line-height: 30rpx;
					// 	color: #fff;
					// 	background-color: red;
					// }
				}

				// >view:nth-child(2) {
				// 	margin-left: 20rpx;
				// 	font-weight: bold;
				// 	font-size: 32rpx;
				// }

				.deduction {
					color: #eb5b1e;
					font-size: 28rpx;
					margin-left: 10rpx;
					vertical-align: sub;
					@include flexs(space-between, flex-start);
					flex-direction: column;
				}
			}

			@include flexs();

			&:nth-child(2) {
				background: #eb5b1e;
				color: #fff;
				border-radius: 30rpx;
				font-size: 32rpx;
				width: 180rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 60rpx;
				text-align: center;
				display: block;
			}
		}

		>.dis {
			background-color: #bababa !important;
			color: #fff !important;
		}
	}

	.payWayContent {
		.tit {
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 2;
			font-weight: bold;
		}

		.list {
			@include flexs();
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 24rpx 0;

			image {
				width: 50rpx;
				height: 50rpx;
				// border-radius: 50%;
				margin-right: 20rpx;
			}

			&:last-child {
				border: 0;
			}
		}
	}

	.box {
		background-color: rgba(0, 0, 0, 0.55);
		height: 100vh;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

		image {
			width: 35%;
			margin-left: 60%;
			margin-top: 20rpx;
		}

		view {
			margin-top: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 1.5;
			font-size: 32rpx;
		}
	}

	.couponList {
		height: 80vh;
		margin: 30rpx;
		width: calc(100% - 60rpx);

		.coupon_item {
			width: calc(100% - 80rpx);
			height: 115rpx;
			@include flexs(space-between, center);
			padding: 24rpx 40rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background: #fff;
			position: relative;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

			&:last-child {
				margin-bottom: 0;
			}

			// &_left{
			// 	@include flexs(space-between, center);
			// 	flex-
			// }
			&::after,
			&::before {
				position: absolute;
				content: '';
				width: 40rpx;
				height: 45rpx;
				border-radius: 50%;
				top: 50%;
				transform: translateY(-50%);
			}

			&::after {
				right: -20rpx;
				background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.09) 100%);
			}

			&::before {
				left: -20rpx;
				background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.09) 100%);
			}

			&>view:first-child {

				height: 80rpx;
				// width: 200rpx;
				@include flexs(space-between, center);
				// flex-direction: column;
				padding-left: 10rpx;

			}

			.couponValue {
				font-size: 64rpx;
				color: #F01B1B;
				padding-right: 50rpx;

				text {
					font-size: 24rpx;
				}
			}

			.couponName {
				font-size: 24rpx;
				font-weight: 600;

				&>view {
					margin-bottom: 15rpx;
				}
			}

			.check {
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				border: 2rpx solid #ccc;
				border-radius: 50%;
			}

			.active {
				background: #fa690a;
				border-color: #fa690a;
				position: relative;

				&::after {
					position: absolute;
					top: 40%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(40deg);
					content: '';
					width: 10rpx;
					height: 20rpx;
					border-right: 5rpx solid #fff;
					border-bottom: 5rpx solid #fff;
				}
			}
		}
	}

	// 选择大楼
	.addressModel {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100000;
		height: 100vh;
		width: 100%;
		background: rgba(0, 0, 0, 0.5)
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background: #fff;
		position: absolute;
		bottom: 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>
<style lang="scss">
	.payWayBox {
		/deep/.u-drawer-bottom {
			width: 100% !important;
			padding: 36rpx 20rpx 40rpx 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
		}
	}
</style>